<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Popup Test</title>

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/container/assets/container.css">

<!-- Dependencies -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<!-- OPTIONAL: Animation (only required if enabling Animation) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/animation/animation-min.js"></script>

<!-- OPTIONAL: Drag & Drop (only required if enabling Drag & Drop) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/dragdrop/dragdrop-min.js"></script>

<!-- Source file -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/container/container-min.js"></script>


<link href="../styles/map-view.css" rel="stylesheet" type="text/css" />
<link href="../styles/dialog.css" rel="stylesheet" type="text/css" />
<link href="../styles/demo.css" rel="stylesheet" type="text/css" />

		<style>
			body { background:#eee }
			label { display:block;float:left;width:45%;clear:left; }
			.clear { clear:both; }
			#resp { font-family:courier;margin:10px;padding:5px;border:1px solid #ccc;background:#fff;}
		</style>

</head>

<script>
	YAHOO.namespace("example.container");

	function init() {

		// Instantiate a Panel from script
		YAHOO.example.container.panel2 = new YAHOO.widget.Panel("panel2", {  visible:false, draggable:false } );
		YAHOO.example.container.panel2.setHeader("Panel #2 from Script");
		YAHOO.example.container.panel2.setBody("This is a dynamically generated Panel.");
		YAHOO.example.container.panel2.setFooter("End of Panel #2");
		YAHOO.example.container.panel2.render(document.body);

//		YAHOO.util.Event.addListener("show1", "click", YAHOO.example.container.panel1.show, YAHOO.example.container.panel1, true);
//		YAHOO.util.Event.addListener("hide1", "click", YAHOO.example.container.panel1.hide, YAHOO.example.container.panel1, true);
//
//		YAHOO.util.Event.addListener("show2", "click", YAHOO.example.container.panel2.show, YAHOO.example.container.panel2, true);
//		YAHOO.util.Event.addListener("hide2", "click", YAHOO.example.container.panel2.hide, YAHOO.example.container.panel2, true);
	}

	YAHOO.util.Event.addListener(window, "load", init);
	
	function panelOnClick3(event) {
		YAHOO.example.container.panel3 = new YAHOO.widget.Panel("panel2", { visible:false, draggable:true, x:event.clientX, y:event.clientY - 15} );
//		YAHOO.example.container.panel3 = new YAHOO.widget.Panel("panel2", { width:"300px", visible:false, draggable:true, context:['event','bl','tr']} );
		YAHOO.example.container.panel3.setHeader("Panel 3 on click event");
		YAHOO.example.container.panel3.setBody("This is a dynamically generated Panel.");
		YAHOO.example.container.panel3.setFooter("End of Panel 3");
		YAHOO.example.container.panel3.render(document.body);
		YAHOO.example.container.panel3.show();
	}

	function panelOnClick(event) {
		YAHOO.example.container.panel1 = new YAHOO.widget.Panel("panel1", { visible:false, draggable:true, x:event.clientX, y:event.clientY - 15} );
		YAHOO.example.container.panel1.render(document.body);
		YAHOO.example.container.panel1.show();
	}
	
</script>


<body>

<div id="panel1">
    <div class="hd">Panel #1 from Markup</div>
    <div class="bd">This is a Panel that was marked up in the document.</div>
    <div class="ft">End of Panel #1</div>
</div>
	
<div id="panel1.2" class="dialog" style="width:30%">
 <div class="content">
   <div class="t"></div>
   <div class="hd">Panel #1 from Markup</div>
    <div class="bd">This is a Panel that was marked up in the document.</div>
    <div class="ft">End of Panel #1</div>
 </div>
 <div class="b"><div></div></div>
</div>

<p><img src="../images/tsm-logo.png" width="246" height="40" onClick="YAHOO.example.container.panel1.show();"/></p>
<p><img src="../map-view/manhattan-riots-view.jpg" width="627" height="651" onClick="panelOnClick(event);"/></p>

</body>
</html>
